/* components */
import SettingGPTViewContentTitle from '@src/modules/setting/gpt/components/title';
import SettingGPTViewCheckbox from '@src/modules/setting/gpt/components/checkbox';
import SettingGPTViewCheckboxGroup from '@src/modules/setting/gpt/components/checkbox-group';
/* enum */
import ComponentNameEnum from "@model/enum/ComponentNameEnum";
/* model */
import { SettingGPTFeedbackTypeCNNmaeEnum, SettingGPTFeedbackTypeEnum } from '@src/modules/setting/gpt/model';
/* vue */
import { defineComponent } from "vue";
/* scss */
import "@src/modules/setting/gpt/components/feedback.scss";

export default defineComponent({
  name: ComponentNameEnum.SettingGPTViewFeedback,
  props: {
  },
  setup(props, { emit }) {
  },
  computed: {
    title(): string {
      return '您的反馈'
    },
    placeholder(): string {
      return '期待你的反馈和意见让我继续成长'
    }
  },
  methods: {
    onFeedbackChangeHandler(value: SettingGPTFeedbackTypeEnum) {

    }
  },
  render() {
    return (
      <div class={ComponentNameEnum.SettingGPTViewFeedback}>
        
        <SettingGPTViewContentTitle
          title={this.title}
        >
        </SettingGPTViewContentTitle>
        
        <SettingGPTViewCheckboxGroup
          onChange={this.onFeedbackChangeHandler}
        >
          
          <div class="setting-gpt-view-checkbox-group-item">
            {/* start 回答有误 */}
            <SettingGPTViewCheckbox
              label={SettingGPTFeedbackTypeEnum.AnswerError}
            >
              { SettingGPTFeedbackTypeCNNmaeEnum[SettingGPTFeedbackTypeEnum.AnswerError] }
            </SettingGPTViewCheckbox>
            {/* end 回答有误 */}
            
            {/* start 没有帮助 */}
            <SettingGPTViewCheckbox
              label={SettingGPTFeedbackTypeEnum.NoHelp}
            >
              { SettingGPTFeedbackTypeCNNmaeEnum[SettingGPTFeedbackTypeEnum.NoHelp] }
            </SettingGPTViewCheckbox>
            {/* end 没有帮助 */}
          </div>
          
          <div class="setting-gpt-view-checkbox-group-item">
            {/* start 存在偏见 */}
            <SettingGPTViewCheckbox
              label={SettingGPTFeedbackTypeEnum.Bias}
            >
              { SettingGPTFeedbackTypeCNNmaeEnum[SettingGPTFeedbackTypeEnum.Bias] }
            </SettingGPTViewCheckbox>
            {/* end 存在偏见 */}
            
            {/* start 答非所问 */}
            <SettingGPTViewCheckbox
              label={SettingGPTFeedbackTypeEnum.NonQuestion}
            >
              { SettingGPTFeedbackTypeCNNmaeEnum[SettingGPTFeedbackTypeEnum.NonQuestion] }
            </SettingGPTViewCheckbox>
            {/* end 答非所问 */}
          </div>
          
        </SettingGPTViewCheckboxGroup>
        
        <div class="setting-gpt-view-feedback-text">
          <el-input
            type="textarea"
            placeholder={ this.placeholder }
            rows={ 4 }
            maxlength={ 500 }
          >
          </el-input>
        </div>
        
        <div class="setting-gpt-view-feedback-button">
          <el-button
            type="primary"
          >
            提交
          </el-button>
        </div>
        
      </div>
    )
  }
});